<template>
    <!-- pages/myincome/makerincome/total/index.wxml -->
    <view>
        <view class="allbox flexbox-sb">
            <view>
                <view class="text-1">{{ makerObj.nickname }}</view>
                <view class="text-2 mt-20">销售创客卡数：{{ makerObj.teamBuyCount }}张</view>
                <view class="text-3">{{ makerObj.inviteUserCount }}个团队成员，共售出{{ makerObj.teamBuyCount }}张创客卡</view>
            </view>
            <view class="imgbox"><image class="img" :src="makerObj.avatarPath"></image></view>
        </view>
        <view class="mt-20">
            <view class="box4" @tap="onDetails" :data-id="item.inviteUserId" v-for="(item, index) in makerList" :key="index">
                <view class="centers">
                    <view class="text-5 mr-20">{{ item.nickname }}</view>
                    <view class="text-v mr-20" v-if="item.role == 1">用户</view>
                    <view class="text-v mr-20" v-if="item.role == 2">美发师</view>
                    <view class="text-v mr-20" v-if="item.role == 3">门店</view>
                    <view class="text-k" v-if="item.isMaker == 1">创客</view>
                </view>

                <view class="text-t mt-20">邀请时间：{{ item.createtime }}</view>

                <!-- <view class="text-t mt-10">推荐创客：一级{{item.buynumber}}张、二级{{item.level2buynumber}}张</view> -->

                <view class="text-t mt-10">团队售卡总数：{{ item.buyNum || 0 }}张</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/myincome/makerincome/total/index.js
const app = getApp(); // 引入app

const _request = require('../../../../utils/request.js'); // 引入require

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            makerList: [],
            makerObj: null,
            page: 1
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getmakerCount(1, false); // 获取个人信息

        _request
            .get('/makerCount/findMakerBuyCount', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    makerObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error);
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.getmakerCount(1, true);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: this.page + 1
        });
        this.getmakerCount(this.page, true);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 获取创客列表
        getmakerCount(page, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/makerCount/findMakerBuyCountList', {
                    userId: uni.getStorageSync('userid'),
                    page,
                    rows: 10
                })
                .then((res) => {
                    this.setData({
                        makerList: page > 1 ? [...this.makerList, ...res.data.data] : res.data.data
                    });

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    console.log(error);

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                });
        },

        // 详情
        onDetails(e) {
            const { id } = e.currentTarget.dataset;
            uni.navigateTo({
                url: '/pages/myincome/makerincome/details/index?id=' + id
            });
        }
    }
};
</script>
<style>
/* pages/myincome/makerincome/total/index.wxss */
.allbox {
    background-color: #2c303f;
    height: 304rpx;
    width: 710rpx;
    margin: 20rpx 20rpx 0rpx 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 5px;
}

.imgbox {
    width: 140rpx;
    height: 140rpx;
    background: #676a75;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.text-1 {
    height: 56rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
}

.text-2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 40rpx;
}

.text-3 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 40rpx;
    margin-top: 80rpx;
}

.text-5 {
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
}

.text-v {
    background: #ffefe1;
    border-radius: 18rx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 36rpx;
    padding: 0 16rpx;
    text-align: center;
}

.text-k {
    width: 80rpx;
    height: 36rpx;
    border-radius: 8rpx;
    border: 1px solid #333333;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
    text-align: center;
}

.text-t {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.box4 {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 4px;
    margin: 0 20rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #ededed;
}
</style>
